<template>
  <view>
    <view class="tn-padding-sm">
      <view>
        <block v-for="(item, index) in list" :key="index">
          <uni-card class="card" :isFull="true" @click="toDetail(item)">
            <text class="uni-body">
              <view>
                <text style="line-height: 2em; color: #3a3a3a" class="label tn-text-xl tn-text-bold">清单编号：{{
                    item.id
                  }}
                </text>
              </view>
              <view class="tn-flex tn-flex-wrap">
                <view class="tn-col-6">
                  <text class="label">
                    拖车收费：
                    <text class="value">{{ item.tcSubtotal }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    吊车收费：
                    <text class="value">{{
                     item.dcSubtotal.split(',').reduce((acc, cur) => {
                      acc += Number(cur) > 0 ? Number(cur) : 0
                      return acc
                    }, 0) || '/'
                      }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    换轮胎：
                    <text class="value">{{ item.hltSubtotal }}</text>
                  </text>
                </view>

                <view class="tn-col-6">
                  <text class="label">
                    整修费：
                    <text class="value">{{
                        calc(`${ Number(item.clzxJqsSubtotal) || 0} + ${Number(item.clzxQgSubtotal) || 0}`) !== '0'
                        ?calc(`${ Number(item.clzxJqsSubtotal) || 0} + ${Number(item.clzxQgSubtotal) || 0}`)
                        : '/'
                      }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    装卸费：
                    <text class="value">{{
                       getZhuangXieFei(item)
                      }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    转运费：
                    <text class="value">{{
                        item.hwyzSubtotal.split(',').reduce((acc, cur) => {
                          acc += Number(cur) > 0 ? Number(cur) : 0
                          return acc
                        }, 0) || '/'
                      }}</text>
                  </text>
                </view>

                <view class="tn-col-6">
                  <text class="label">
                    搭电：
                    <text class="value">{{ item.ddSubtotal }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    送水：
                    <text class="value">{{ item.ssSubtotal }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    保管费：
                    <text class="value">{{ item.clbgSubtotal }}</text>
                  </text>
                </view>

                <view class="tn-col-6">
                  <text class="label">
                    现场清理：
                    <text class="value">{{ item.sgxcqlSubtotal }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    通行费：
                    <text class="value">{{ item.cltxSubtotal }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    其他收费：
                    <text class="value">{{ item.qtSubtotal }}</text>
                  </text>
                </view>
                <view class="tn-col-6">
                  <text class="label">
                    合计：
                    <text class="value">{{ item.sumMoneyLower }}</text>
                  </text>
                </view>
              </view>

            </text>

<!--            <view class="tn-flex tn-flex-direction-row-reverse tn-margin-top-sm">-->
<!--              <text @click.stop="deleteItem(item)">-->
<!--                <tn-button style="margin-left: 10px;" backgroundColor="tn-bg-red"-->
<!--                           fontColor="tn-color-white">删除-->
<!--                </tn-button>-->
<!--              </text>-->
<!--            </view>-->
          </uni-card>
        </block>

      </view>
      <view v-if="isEmpty">
        <tn-empty mode="list"></tn-empty>
      </view>
    </view>

    <view class="add-btn tn-main-gradient-blue tn-shadow-gray" @click="toAdd">
      <view class="tn-icon-add tn-text-xxl"/>
    </view>
  </view>
</template>

<script>
import {listJyBase} from '@/api/rescue.js';
import {getJyChargeList} from "@/api/jyChargeList";
import {calc} from "a-calc/es";

export default {
  data() {
    return {
      isEmpty: false,
      query: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      list: []
    };
  },
  onShow() {
    this.load()
  },
  methods: {
    getZhuangXieFei(item) {
      const jixie = item.hwzxJxzxSubtotal.split(',').reduce((acc, cur) => {
        acc += Number(cur) > 0 ? Number(cur) : 0
        return acc
      }, 0)
        return  calc(`${ Number(jixie) || 0} + ${Number(item.hwzxRgzxSubtotal) || 0}`) !== '0'
            ?calc(`${ Number(jixie) || 0} + ${Number(item.hwzxRgzxSubtotal) || 0}`)
            : '/'
    },
    calc,
    deleteItem(item) {
      console.log('deleteItem', item)
    },
    load() {
      getJyChargeList(this.$route.query.jyBaseId).then((res) => {
        this.list = res.data;
        this.isEmpty = !res.data?.length
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/rescue/add/zuoye?id=' + item.id
      });
    },
    toAdd() {
      uni.navigateTo({
        url: '/pages/rescue/add/zuoye'+ "?jyBaseId="+ this.$route.query.jyBaseId
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.card {
  margin: 0 !important;
  border-radius: 6px;
  margin-top: 15px !important;

  ::v-deep {
    .uni-card__header {
      .uni-card__header-box {
        .uni-card__header-content-title {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }

    .title {
      color: #333;
      line-height: 1.5em;
      font-size: 32rpx;
      font-weight: bold;
    }

    view {
      padding: 2px;
      line-height: 2em;
    }

    .value {
      color: $tn-color-gray;
      float: right;
      padding-right: 20rpx;
    }
  }
}

.add-btn {
  position: fixed;
  right: 40rpx;
  bottom: 100rpx;
  border-radius: 50%;
  padding: 30rpx;
}

.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}
</style>
